﻿<!DOCTYPE html>
@{
    Layout = "/Views/Shared/_level1.cshtml";
}
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta name="renderer" content="webkit">
    <link href="/SiteUI/Register/Register.css" rel="stylesheet" />
</head>
<body>
    <div class="view_fix" id="viewRegister">
        <div class="row step1">
        </div>
        <div class="row" id="vr-tip">
            您正在申请重置手机
        </div>
        <div id="stepOne">
            <div class="row">
                <div class="col-lg-4 col-lg-offset-4">
                    <h5>原手机号码：</h5>
                    <input maxlength="13" id="oldPhone" placeholder="请输入原手机号" />
                </div>
                <div class="col-lg-4">
                    <h5>&nbsp;</h5>
                    <div class="inputTip" id="it-old"></div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-2 col-lg-offset-4">
                    <h5>验证码：</h5>
                    <input maxlength="10" id="txbCaptcha_old" placeholder="请输入收到的验证码" />

                </div>
                <div class="col-lg-2" id="btnSendCaptcha_old">
                    <h5>&nbsp;</h5>
                    <div class="button">免费获取验证码</div>
                </div>
                <div class="col-lg-4">
                    <h5>&nbsp;</h5>
                    <div class="inputTip" id="it-captcha_old"></div>
                </div>
                <div class="col-lg-4 col-lg-offset-4 button btn-big" id="btnResetPhone">
                    重置手机
                </div>
            </div>
        </div>
        <div id="stepTwo" style="display:none">
            <div class="row">
                <div class="col-lg-4 col-lg-offset-4">
                    <h5>新的手机号码：</h5>
                    <input maxlength="13" id="newPhone" placeholder="请输入新手机号" />
                </div>
                <div class="col-lg-4">
                    <h5>&nbsp;</h5>
                    <div class="inputTip" id="it-new"></div>
                </div>
            </div>
            <div class="row" id="vr-captcha">
                <div class="col-lg-2 col-lg-offset-4">
                    <h5>验证码：</h5>
                    <input maxlength="10" id="txbCaptcha_new" placeholder="请输入收到的验证码" />

                </div>
                <div class="col-lg-2" id="btnSendCaptcha_new">
                    <h5>&nbsp;</h5>
                    <div class="button">免费获取验证码</div>
                </div>
                <div class="col-lg-4">
                    <h5>&nbsp;</h5>
                    <div class="inputTip" id="it-captcha_new"></div>
                </div>
                <div class="col-lg-4 col-lg-offset-4 button btn-big" id="btnConfirmPhone">
                    重置手机号码
                </div>
            </div>

        </div>
        <div id="stepThree" style="display:none">
            <div class="row">
                <div class="col-lg-2 col-lg-offset-5 text_center">
                    <img src="~/SiteUI/Imgs/acntOk.png" />修改手机成功，3秒后回到前一页面
                </div>
            </div>

        </div>
    </div>

    <script>
        ResetPhone = {
            NewAcnt: {
                oldPhone: null,
                newPhone: null,
                captcha:null
            },
            BtnSendCaptcha_old: new LiberUI.Button("#btnSendCaptcha_old >.button"),
            BtnSendCaptcha_new: new LiberUI.Button("#btnSendCaptcha_new >.button"),
            PhoneFormat: /^1[3,4,5,7,8]{1}[0-9]{9}$/,  //手机号格式验证的正则
            Countdown: 0,//倒计时秒数
            CountdownHandler: null,  //倒计时器

            checkOldPhone: function () {
                var p = $("#oldPhone").vl();
                if (!ResetPhone.PhoneFormat.test(p)) {
                    $("#it-old").vl("请输入正确的手机号码").addClass("error");
                    $("#oldPhone").select();
                    return false;
                }
                else if (User && User.acnt != p) {
                    $("#it-old").vl("手机号码与您已登录的账号不匹配").addClass("error");
                    $("#oldPhone").select();
                    return false;
                }
                else {
                    $("#it-old").removeClass("error").vl("");
                    return true;
                }
            },
            checkNewPhone: function () {
                var p = $("#newPhone").vl();
                if (!ResetPhone.PhoneFormat.test(p)) {
                    $("#it-new").vl("请输入正确的新手机号码").addClass("error");
                    $("#newPhone").select();
                    return false;
                }
                else if (User && User.acnt == p) {
                    $("#it-new").vl("新手机号与原手机号一样").addClass("error");
                    $("#newPhone").select();
                    return false;
                }
                else {
                    $("#it-new").removeClass("error").vl("");
                    return true;
                }
            },
            sendCaptcha_old: function () {
                //检查发送间隔，发送最新的验证码
                if (ResetPhone.Countdown <= 0 && ResetPhone.checkOldPhone() === true) {
                    ResetPhone.Countdown = 60;
                    ResetPhone.NewAcnt.oldPhone = $("#oldPhone").vl();
                    $.getJSON("/Register/SendCaptcha", { phone: ResetPhone.NewAcnt.oldPhone, forwhat: "resetphone_old" }, ResetPhone.sendCaptchaEnd_old);
                    ResetPhone.BtnSendCaptcha_old.disable();
                    $("#txbCaptcha_old").focus();
                    success("发送成功","验证码已发送，5分钟内输入有效");
                    ResetPhone.CountdownHandler = setTimeout(ResetPhone.countInterval_old, 1000);
                }
            },
            sendCaptcha_new: function () {
                //检查发送间隔，发送最新的验证码
                if (ResetPhone.Countdown <= 0 && ResetPhone.checkNewPhone() === true) {
                    ResetPhone.Countdown = 60;
                    ResetPhone.NewAcnt.newPhone = $("#newPhone").vl();
                    $.getJSON("/Register/SendCaptcha", { phone: ResetPhone.NewAcnt.newPhone, forwhat: "resetphone_new" }, ResetPhone.sendCaptchaEnd_new);
                    ResetPhone.BtnSendCaptcha_new.disable();
                    $("#txbCaptcha_new").focus();
                    success("发送成功","验证码已发送，5分钟内输入有效");
                    ResetPhone.CountdownHandler = setTimeout(ResetPhone.countInterval_new, 1000);
                }
            },
            sendCaptchaEnd_old: function (rtn) {
                //TODO:处理发送验证码结果
                if (!rtn.IsPositive) {
                    clearTimeout(ResetPhone.CountdownHandler);
                    ResetPhone.BtnSendCaptcha_old.enable().vl("免费获取验证码");
                    $("#it-captcha_old").removeClass("info,success,error").addClass("error").vl(ErrFormate(res_sobiz, rtn.ErrorSrc, rtn.ErrorCode, rtn.Error));
                }
            },
            sendCaptchaEnd_new: function (rtn) {
                //TODO:处理发送验证码结果
                if (!rtn.IsPositive) {
                    clearTimeout(ResetPhone.CountdownHandler);
                    ResetPhone.BtnSendCaptcha_new.enable().vl("免费获取验证码");
                    $("#it-captcha_new").removeClass("info,success,error").addClass("error").vl(ErrFormate(res_sobiz, rtn.ErrorSrc, rtn.ErrorCode, rtn.Error));
                }
            },
            countInterval_old: function () {
                if (ResetPhone.Countdown > 0) {
                    ResetPhone.Countdown = ResetPhone.Countdown - 1;
                    ResetPhone.BtnSendCaptcha_old.vl("[" + ResetPhone.Countdown + "]秒后重新获取");
                    ResetPhone.CountdownHandler = setTimeout(ResetPhone.countInterval_old, 1000);
                }
                else {
                    ResetPhone.Countdown = 0;
                    ResetPhone.BtnSendCaptcha_old.enable().vl("免费获取验证码");
                }
            },
            countInterval_new: function () {
                if (ResetPhone.Countdown > 0) {
                    ResetPhone.Countdown = ResetPhone.Countdown - 1;
                    ResetPhone.BtnSendCaptcha_new.vl("[" + ResetPhone.Countdown + "]秒后重新获取");
                    ResetPhone.CountdownHandler = setTimeout(ResetPhone.countInterval_new, 1000);
                }
                else {
                    ResetPhone.Countdown = 0;
                    ResetPhone.BtnSendCaptcha_new.enable().vl("免费获取验证码");
                }
            },
            checkOldForm:function(){
                if (ResetPhone.checkOldPhone()) {
                    $("#btnResetPhone").off("click", ResetPhone.checkOldForm);
                    ResetPhone.NewAcnt.oldPhone = $("#oldPhone").vl();
                    ResetPhone.NewAcnt.captcha = $("#txbCaptcha_old").vl();
                    //后台请求检查当前验证码是否正确，继续下一步
                   $.post("/Register/CheckCaptcha", {phone:ResetPhone.NewAcnt.oldPhone,captcha:ResetPhone.NewAcnt.captcha},ResetPhone.checkOldEnd);
                }
            },
            checkOldEnd: function (rtn) {
                //切换过渡
                ResetPhone.Countdown = 0;
                if (rtn.IsPositive) {
                    $("#stepOne").hide();
                    $("#stepTwo").show();
                }
                else {
                    $("#btnResetPhone").on("click", ResetPhone.checkOldForm);
                    error("失败", ErrFormate(res_sobiz,rtn.ErrorSrc,rtn.ErrorCode,rtn.Error));
                }
            },
            checkNewForm: function () {
                if (ResetPhone.checkNewPhone()) {
                    $("#btnConfirmPhone").off("click", ResetPhone.checkNewForm);
                    ResetPhone.NewAcnt.newPhone = $("#newPhone").vl();
                    ResetPhone.NewAcnt.captcha = $("#txbCaptcha_new").vl();
                    //后台请求检查当前验证码是否正确，继续下一步
                    $.post("/Register/CheckCaptcha", { phone: ResetPhone.NewAcnt.newPhone, captcha: ResetPhone.NewAcnt.captcha }, ResetPhone.checkNewEnd);
                }
            },
            checkNewEnd: function (rtn) {
                ResetPhone.Countdown = 0;
                if (rtn.IsPositive) {
                    $.post("/MyBiz/ChangePhone", ResetPhone.NewAcnt, function (rtn) {
                        if (rtn.IsPositive) {
                            $("#stepTwo").hide();
                            $("#stepThree").show();
                            setTimeout(function (e) { window.history.go(-1); }, 3000);
                        }
                        else {
                            $("#btnConfirmPhone").on("click", ResetPhone.checkNewdForm);
                            Error("失败", ErrFormate(res_sobiz, rtn.ErrorSrc, rtn.ErrorCode, rtn.Error));
                        }
                    });
                }
                else {
                    $("#btnConfirmPhone").on("click", ResetPhone.checkNewdForm);
                    Error("失败", ErrFormate(res_sobiz, rtn.ErrorSrc, rtn.ErrorCode, rtn.Error));
                }
            }
        }
        $(function () {
            $("#oldPhone").focus();
            $("#oldPhone").blur(ResetPhone.checkOldPhone);
            $("#newPhone").blur(ResetPhone.checkNewPhone);
            ResetPhone.BtnSendCaptcha_old.on("click", ResetPhone.sendCaptcha_old);
            ResetPhone.BtnSendCaptcha_new.on("click", ResetPhone.sendCaptcha_new);
            $("#btnResetPhone").on("click", ResetPhone.checkOldForm);
            $("#btnConfirmPhone").on("click", ResetPhone.checkNewForm);
        });
    </script>
</body>
</html>



